<template>
	<div class="tool-title-box">
		<h3>轮播图设置</h3>
		<div class="img-list-box">
			<draggable :list="activeComponent.data.carousels">
				<template #item="{ element,index }">
					<div class="list-item">
						<div class="list-item-box">
							<div class="img-title" @click="openImgText(element, index)">
								<div class="title-left">
									<i class="fa fa-picture-o" aria-hidden="true"></i>
								</div>
								<div class="title-right">
									<i class="fa fa-trash-o mr10" aria-hidden="true" @click.stop="delImgText(element, index)"></i>
									<i v-if="imgCurrent === index" class="fa fa-angle-down" aria-hidden="true"></i>
									<i v-else class="fa fa-angle-up" aria-hidden="true"></i>
								</div>
							</div>
							<div class="add-img-box" v-show="imgCurrent === index">
								<div class="operation-box">
									<tool-single-img v-model:imageUrl='element.url' tip="建议尺寸: 16 : 9等比例图片, 高度自适应"></tool-single-img>
									<tool-select-link v-model:linkObj='element.linkObj' title="图片链接"></tool-select-link>
									<div class="item-box">
										<el-button type="danger" @click="delImgText(element, index)" class="w100 mt10">
											<i class="fa fa-trash-o" aria-hidden="true"></i><span>删除内容</span>
										</el-button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</template>
			</draggable>
		</div>
		<el-button type="primary" @click="addImgText" class="w100">
			<i class="fa fa-picture-o" aria-hidden="true"></i><span>添加内容</span>
		</el-button>
		
		<div class="operation-box">
			<div class="item-box">
				<div class="title">初始灯片</div>
				<div class="modify-box">
					<el-input-number v-model="activeComponent.data.initialIndex" :min="0" ></el-input-number>
				</div>
			</div>
			<div class="item-box">
				<div class="title">时间间隔</div>
				<div class="modify-box">
					<el-input-number v-model="activeComponent.data.interval" :min="1000" ></el-input-number>
				</div>
			</div>
			<div class="item-box">
				<div class="title">指示器位置</div>
				<div class="modify-box">
					<el-select v-model="activeComponent.data.indicatorPosition" style="width: 130px;" >
						<el-option label="内部" value=""/>
						<el-option label="外部" value="outside"/>
						<el-option label="不显示" value="none"/>
					</el-select>
				</div>
			</div>
			<div class="item-box">
				<div class="title">触发方式</div>
				<div class="modify-box">
					<el-select v-model="activeComponent.data.trigger" style="width: 130px;" >
						<el-option label="鼠标悬浮" value="hover"/>
						<el-option label="鼠标点击" value="click"/>
					</el-select>
				</div>
			</div>
			<div class="item-box">
				<div class="title">展示方向</div>
				<div class="modify-box">
					<el-select v-model="activeComponent.data.direction" style="width: 130px;" >
						<el-option label="水平方向" value="horizontal"/>
						<el-option label="垂直方向" value="vertical"/>
					</el-select>
				</div>
			</div>
			<div class="item-box">
				<div class="title">切换箭头</div>
				<div class="modify-box">
					<el-select v-model="activeComponent.data.arrow" style="width: 130px;" >
						<el-option label="总是" value="always"/>
						<!-- <el-option label="悬浮" value="hover"/> -->
						<el-option label="从不" value="never"/>
					</el-select>
				</div>
			</div>
			<div class="item-box">
				<div class="title">自动切换</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.autoplay" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">循环显示</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.loop" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<!-- <div class="item-box">
				<div class="title">灯片类型</div>
				<div class="modify-box">
					<el-select v-model="activeComponent.data.type" style="width: 130px;" >
						<el-option label="默认" value=""/>
						<el-option label="卡片" value="card"/>
					</el-select>
				</div>
			</div> -->
		</div>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, onMounted, computed } from 'vue';
	import { useStore } from '/@/store/index';
	import { ElMessageBox } from 'element-plus';
	import draggable from 'vuedraggable';
	import ToolSelectLink from '/@/views/decorator/components/toolBar/module/tool-select-link.vue';
	import ToolSingleImg from '/@/views/decorator/components/toolBar/module/tool-single-img.vue';
	export default {
		name: 'banner-tool',
		components: {
			ToolSingleImg,
			ToolSelectLink,
			draggable
		},
		setup() {
			const store = useStore();
			const state = reactive({
				alignList: [{
						id: 1,
						label: '居左',
						value: 'left'
					},
					{
						id: 2,
						label: '居中',
						value: 'center'
					},
					{
						id: 3,
						label: '居右',
						value: 'right'
					}
				],
				textAlign: 'left',
				imgCurrent: null,
			});
			state.terminal = computed(() => store.state.decorator.terminal);
			state.activeComponent = computed(() => store.state.decorator.activeComponent);
			
			const openImgText = (item, index) => {
				if (state.imgCurrent === index) {
					state.imgCurrent = null
					return false
				}
				state.imgCurrent = index
			}
			// 添加图文
			const addImgText = () => {
				state.activeComponent.data.carousels.push({
					title: '',
					imgData: '',
					url: ''
				})
			}
			// 删除内容
			const delImgText = (item, index) => {
				ElMessageBox.confirm('确定删除吗？', '提示', {
					confirmButtonText: '删除',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(() => {
					state.activeComponent.data.carousels.splice(index, 1)
				}).catch(() => {});
			}
			
			onMounted(() => {
				
			})
			return {
				openImgText,
				addImgText,
				delImgText,
				...toRefs(state),
			};
		},
	}
</script>

<style lang="scss" scoped>
@import './scss/index.scss';
</style>
